<template>
  <div>
    <div class="v-mask" v-if="show" @click="handleShowLis"></div>
    <div class="day-lis-modal" v-if="show">
      <div class="header">
        <div class="result-tips">
          <h3>
            <span>当前共 {{dayLis.data.length}} 条未签收，时间为：{{exportDay}}</span>
            <span v-if="dayLis.data.length == 0">，类型：暂无</span>
            <div v-else>
              <span>，其中类型为</span>
              <span v-for="(val, idx) in dayLis.types" :key="idx">
                {{val.namewc}}{{val.totals}}
                <span v-if="idx < dayLis.types.length - 1">、</span>
              </span>
            </div>
          </h3>
          <h3 class="multi-btn" @click="handleShowSign">
            <img src="/static/doctor-img/arrow2.png" alt="">
            <span>点击批量交接</span>
          </h3>
        </div>
      </div>
      <div class="body">
        <div class="el-table el-table--border " v-if="data.length > 0">
          <table v-for="(tbodyi,index) in data" :key="index" :class="['undo-table', index != 0 && data[index-1].date != tbodyi.date ? 'border-tr' : '']">
            <thead class="title">
              <tr :class="[index != 0 && data[index-1].date == tbodyi.date ? 'hide-tr' : '']">
                <td :width="index == 0 || (index != 0 && data[index-1].date != tbodyi.date) ? '319' : '326'">
                  <div class="text" v-if="index == 0 || data[index-1].date != tbodyi.date">{{tbodyi.date}}</div>
                </td>
                <td width="195"></td>
                <td width="147"></td>
                <td width="206"></td>
                <td width="196"></td>
                <td></td>
              </tr>
            </thead>
            <colgroup>
              <col v-for="(cloi,cind) in col" :key="cind">
            </colgroup>
            <thead class="is-group">
              <tr v-if="index == 0 || data[index-1].title != tbodyi.title">
                <th v-for="(thi,thind) in col" :key="thind" class="is-center">
                  <div class="cell">{{thi.title}}</div>
                </th>
              </tr>
            </thead>
            <tbody>
                <tr v-if="tbodyi.typeL.length == 0">
                    <td class="is-center">
                      <div class="cell">
                        {{date.day}}
                        <div v-if="tbodyi.time != ''" class="tbody-time">{{tbodyi.time}}</div>
                        <div v-else class="tbody-time">{{date.time}}</div>
                      </div>
                    </td>
                    <td class="is-center"><div class="cell">暂无数据</div></td>
                    <td class="is-center"><div class="cell">暂无数据</div></td>
                    <td class="is-center"><div class="cell">暂无数据</div></td>
                    <td class="is-center"><div class="cell">暂无数据</div></td>
                    <td class="is-center"><div class="cell">{{tbodyi.title}}</div></td>
                </tr>
                <tr v-else v-for="(tri,trind) in tbodyi.typeL" :key="trind">
                    <td class="is-center" v-if="trind==0" :rowspan="tbodyi.typeL.length">
                      <div class="cell">
                        {{date.day}}
                        <div v-if="tbodyi.time != ''" class="tbody-time">{{tbodyi.time}}</div>
                        <div v-else class="tbody-time">{{date.time}}</div>
                      </div>
                    </td>
                    <td class="is-center pointer" :style="{'background-color':tri.color,color:'#333'}" @click="handleShowClassifyOrder(tri)"><div class="cell">{{tri.title}}</div></td>
                    <td class="is-center"><div :class="['cell', tri.num == 0 ? 'empty-tips' : '']">{{tri.num == 0 ? '暂无数据' : tri.num}}</div></td>
                    <td class="is-center"><div :class="['cell', tri.weight == 0 ? 'empty-tips' : '']">{{tri.weight == 0 ? '暂无数据' : `${tri.weight.toFixed(2)}kg`}}</div></td>
                    <td class="is-center" v-if="trind==0" :rowspan="tbodyi.typeL.length"><div class="cell">
                        {{tbodyi.staff.join('，')}}
                    </div></td>
                    <td 
                      v-if="trind==0" 
                      :rowspan="tbodyi.typeL.length"
                      :class="[
                        'is-center', 
                        tbodyi.title =='点击交接' ? (tbodyi.staff.length != 0 ? 'enable-btn' : 'disable-btn') : '', 
                        { 'no-data': tbodyi.title == '暂无数据' } 
                      ]">
                      <div class="cell" style="width:95px;margin: auto;" @click="handleShowConfirm(tbodyi)">
                        {{tbodyi.title}}
                      </div>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    col: {
      type: Array,
      default: () => []
    },
    dayLis: {
      type: Object,
      default: {
        data: [],
        types: [
            // { namewc: '感染性', totals: '100' }
        ]
      }
    },
    exportDay: {
      type: String,
      default: ''
    },
    date: {
      type: Object,
      default: {day:'',time:''},
    }
  },
  methods: {
    handleShowClassifyOrder(item){
      this.$emit('handle-show-classify-order', item)
    },
    handleShowConfirm(item){
      this.$emit('handle-show-confirm', item)
    },
    handleShowSign(){
      this.$emit('handle-show-sign')
    },
    handleShowLis(){
      this.$emit('handle-show-lis')
    }
  },
}
</script>

<style>

</style>